import { View, Text, Input } from '@tarojs/components'
import React, { useState } from 'react'
import './index.scss'

const Filter = () => {
  const [priceRange, setPriceRange] = useState({ min: '', max: '' })
  const [selectedTags, setSelectedTags] = useState([])
  const [selectedTime, setSelectedTime] = useState('')
  const [selectedTaste, setSelectedTaste] = useState('')
  const [selectedCuisine, setSelectedCuisine] = useState('')

  const timeOptions = ['早餐', '午餐', '下午茶', '晚餐']
  const tasteOptions = ['清淡', '适中', '偏辣', '麻辣']
  const cuisineOptions = [
    { text: '中餐', icon: 'bowl-rice' },
    { text: '西餐', icon: 'utensils' },
    { text: '日料', icon: 'fish' },
    { text: '川菜', icon: 'pepper-hot' },
    { text: '粤式', icon: 'shrimp' }
  ]

  const handleTimeSelect = (time) => {
    setSelectedTime(time === selectedTime ? '' : time)
  }

  const handleTasteSelect = (taste) => {
    setSelectedTaste(taste === selectedTaste ? '' : taste)
  }

  const handleCuisineSelect = (cuisine) => {
    setSelectedCuisine(cuisine === selectedCuisine ? '' : cuisine)
  }

  return (
    <View className='filter'>
      <View className='filter__header'>
        <Text className='filter__title'>筛选美食</Text>
      </View>

      <View className='filter__section'>
        <Text className='filter__section-title'>价格范围</Text>
        <View className='filter__price'>
          <Input
            className='filter__price-input'
            type='number'
            placeholder='最低价'
            value={priceRange.min}
            onInput={e => setPriceRange({ ...priceRange, min: e.detail.value })}
          />
          <Text className='filter__price-separator'>-</Text>
          <Input
            className='filter__price-input'
            type='number'
            placeholder='最高价'
            value={priceRange.max}
            onInput={e => setPriceRange({ ...priceRange, max: e.detail.value })}
          />
        </View>
      </View>

      <View className='filter__section'>
        <Text className='filter__section-title'>用餐时间</Text>
        <View className='filter__tags'>
          {timeOptions.map(time => (
            <Text
              key={time}
              className={`filter__tag ${time === selectedTime ? 'filter__tag--active' : ''}`}
              onClick={() => handleTimeSelect(time)}
            >
              {time}
            </Text>
          ))}
        </View>
      </View>

      <View className='filter__section'>
        <Text className='filter__section-title'>口味偏好</Text>
        <View className='filter__tags'>
          {tasteOptions.map(taste => (
            <Text
              key={taste}
              className={`filter__tag ${taste === selectedTaste ? 'filter__tag--active' : ''}`}
              onClick={() => handleTasteSelect(taste)}
            >
              {taste}
            </Text>
          ))}
        </View>
      </View>

      <View className='filter__section'>
        <Text className='filter__section-title'>菜系选择</Text>
        <View className='filter__cuisine'>
          {cuisineOptions.map(cuisine => (
            <View
              key={cuisine.text}
              className={`filter__cuisine-item ${cuisine.text === selectedCuisine ? 'filter__cuisine-item--active' : ''}`}
              onClick={() => handleCuisineSelect(cuisine.text)}
            >
              <Text className={`fa-solid fa-${cuisine.icon}`} />
              <Text className='filter__cuisine-text'>{cuisine.text}</Text>
            </View>
          ))}
        </View>
      </View>

      <View className='filter__actions'>
        <View className='filter__button filter__button--outline'>重置</View>
        <View className='filter__button filter__button--primary'>确定</View>
      </View>
    </View>
  )
}

export default Filter 